<!-- Back.vue -->
<template>
  <div class="back-button" :style="customStyle" @click="goBack">
    <LeftOutlined />
    <span>返回</span>
  </div>
</template>

<script setup lang="ts">
import { LeftOutlined } from '@ant-design/icons-vue';
import { useRouter } from 'vue-router';
import { defineProps } from 'vue';

const router = useRouter();

const props = defineProps({
customStyle: {
  type: Object,
  default: () => ({})
}
});

const goBack = () => {
router.back();
};
</script>

<style scoped>
.back-button {
display: flex;
align-items: center;
cursor: pointer;
color: #333;
font-size: 16px;
}

.back-button:hover {
color: #007bff;
}

.back-button span {
margin-left: 8px;
}
</style>